<template>
    <div class="FileUploadWrap">
        <a-button type="primary" @click="handClick">上传</a-button>
        <a-modal v-model="visible" title="上传文件" @ok="handleOk" :footer="null" @cancel="onClose">
            <div class="modalWrap">
                <a-form :form="form">
                    <a-form-item label="归属目录" :required="true">
                        <a-tree-select :value="directoryId" show-search :allowClear="true" style="width: 100%"
                            :replaceFields="replaceFields" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            placeholder="请选择目录" :tree-data="treeList" @change="onChange">
                        </a-tree-select>
                    </a-form-item>
                    <a-form-item>
                        <a-upload-dragger name="file" :disabled="isDisabled" :multiple="true" :action="updateFile"
                            @change="handleChange" :data="{ directoryId: directoryId }" :fileList="fileList">
                            <a-tooltip :title="isDisabled ? '请选择归属目录' : ''">
                                <p class="ant-upload-drag-icon">
                                    <a-icon type="inbox" />
                                </p>
                                <p class="ant-upload-text">
                                    点击上传
                                </p>
                                <p class="ant-upload-hint">
                                    支持单次或批量上传
                                </p>
                            </a-tooltip>
                        </a-upload-dragger>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'FileUpload',
    data() {
        return {
            visible: false,
            directoryId: null,
            updateFile: '',
            replaceFields: {
                children: "child",
                title: "name",
                value: 'id',
                key: "key",
            },
            form: this.$form.createForm(this, { name: 'coordinated' }),
            fileList: [],
        }
    },
    props: {
        treeList: {
            type: [Object, Array],
            default: () => []
        },
        callBack: {
            type: Function,
            default: () => { }
        }
    },
    mounted() {
        this.updateFile = this.$updateFile;
    },
    methods: {
        handClick() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
            if (this.fileList.length > 0 && typeof (this.callBack) == 'function') {
                this.callBack();
            }
            this.fileList = [];
            this.directoryId = null;
            this.form.resetFields();
        },
        handleOk() {
        },
        handleChange(e) {
            this.fileList = e.fileList;
        },
        onChange(val) {
            this.directoryId = val;
        },
    },
    computed: {
        isDisabled() {
            let res = false;
            if (!this.directoryId) {
                res = true;
            }
            return res;
        },
    },
    watch: {
    }
}
</script>
<style lang="less" scoped>
.FileUploadWrap {
    width: 100%;
    height: 100%;
}

.modalWrap {
    width: 100%;
    min-height: 30vh;
}
</style>